<template>
  <div style="padding-top: 50px;">


    <router-view></router-view>
    <div ref="box" style="height: calc(100vh - 147px);overflow: scroll;">

    <!-- 搜索结果 -->
    <!-- <div v-show="searchIsShow" style="position: fixed;top: 96px;z-index: 9999;width: 100% ; height: calc(100vh - 147px);overflow: scroll;background-color: #fff;"> -->
     <!-- 商品卡片 -->
     <!-- <van-card
    v-for="(index,item) in searchList"
    :key="index"
    :thumb=item.picUrl
    :title="item.name"
    :desc="item.brief"
    :price="item.retailPrice"
    :origin-price="item.counterPrice"
    />
    <p style="text-align: center; color: rgb(109, 109, 109);">全部加载完毕!</p>
    </div> -->
    
    <!-- 搜索框 -->
    
    <van-search
    style="position: fixed;top: 46px;z-index: 88;width: 100%;"
    v-model="value"
    shape="round"
    show-action
    background="#4fc08d"
    placeholder="请输入搜索关键词"
    @input="searchShopp(value)"
    @clear="clearSearchText"
    @focus="updataAllList"
    />

    <!-- 轮播图 区域 -->
    <van-swipe indicator-color='rgb(79, 192, 141)' class="my-swipe" :autoplay="3000" >
        <van-swipe-item v-for="itme in banner" :key="itme.id" >
            <van-image
            width="100%"
            height="100%"
            :src="itme.url"
            />
        </van-swipe-item>
    </van-swipe>

    <!-- 九宫格 区域 -->
    <van-grid :column-num="5">
    <van-grid-item v-for="itme in channel" :key="itme.id" :icon="itme.iconUrl" :text="itme.name"/>
    </van-grid>


    <!-- 列表加载  商品卡片 包裹起来 -->
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>

    <!-- 商品卡片 -->
    <van-card
    v-for="(item,index) in pageList"
    :key="index"
    :thumb=item.picUrl
    :title="item.name"
    :desc="item.brief"
    :price="item.retailPrice"
    :origin-price="item.counterPrice"
    @click="partShopp(item.id,item.id)"
    />

</van-list>


  </div>
  </div>
</template>

<script>
export default {
async created(){
    //banner图  和  导航 icon 获取数据
    await this.$axios({
        url:'/wx/home/index',
    }).then(res=>{
        // console.log(res.data.data);
        this.banner=res.data.data.banner
        this.channel=res.data.data.channel
        this.channel[9].name='更多'
        this.channel[9].iconUrl='ellipsis'
    })

    //首页商品 加载
    await this.$axios({
        url:`/wx/goods/list?page=${this.page}&limit=10`
    }).then(res=>{
        // console.log(res.data.data.list);
        this.pageList=res.data.data.list
        this.searchList=res.data.data.list
    })


},
data(){
    return{
        searchList:[],
        allShopp:[],
        pageList:[],
        page:1,
        value:'',
        channel:[],
        banner:[],
        loading: false,
        finished: false,
        tatal:0,
        searchIsShow:false,
    }
},
methods:{
    async onLoad(){
        this.page++;
        await this.$axios({
        url:`/wx/goods/list?page=${this.page}&limit=10`
    }).then(res=>{
        // console.log(res.data.data.list);
        this.pageList=[...this.pageList,...res.data.data.list]
        this.loading=false
        if(res.data.data.list.length<10){
            this.finished=true
        }

    })
    },
    searchShopp(value){
        value=value.trim()
        if(value!==''){
            this.pageList = this.allShopp.filter(itme=>{
                return itme.name.includes(value)
            })
            this.finished=true
            this.$refs.box.scrollTop=398

            // console.log(this.$refs.box.scrollTop);
        }else{
            this.pageList=this.searchList
            this.finished=false
        }
    },
    clearSearchText(){
        this.value=''
    },
    partShopp(id,pid){
        // console.log(id);
        this.$router.push(`home/part?id=${id}&pid=${pid}`)
    },
    async updataAllList(){
            //全部的商品 加载
    await this.$axios({
        url:`/wx/goods/list?page=${this.page}&limit=238`
    }).then(res=>{
        // console.log(res.data.data.list);
        this.allShopp=res.data.data.list
    })
    },
},
}
</script>

<style scoped>
.my-swipe .van-swipe-item{
    color: #fff;
    font-size: 20px;
    /* line-height: 25vh; */
    text-align: center;
    background-color: #fff;
    margin: 7px 0 -2px 0;
  }
.van-grid-item{
    color: #787878 !important;
}
</style>